<!--搭建头部组件-->
<!--其中有收获地址三级联动的js 事件-->
<template>
	<div>
		<div class="top">
			<div class="top_1">
				<div class="top-left">
					<span>所在城市:</span>
					<span class="address">北京市朝阳区</span>
					<img src="../assets/image/daosanjiao.png" class="address_img">
				</div>
				<div class="Id">
					<div class="Id_up">
						<span>建议您收货地址 : </span>
						<button>哈密市伊州区</button>
					</div>
					<div class="select">
						<v-distpicker @selected='trigger' :province="select.province" :city="select.city" :area="select.area" @province="onChangeProvince" @city="onChangeCity" @area="onChangeArea"></v-distpicker>
					</div>
					<button class="ok">保存</button>
				</div>
				<div class="top-right">
					<span class="span_1">您好,</span>
					<em @click="enter($event)" class="placelogin">请登录</em>
					<span @click="out()" class="span1">退出</span>
					<span @click="myorder()" class="span_1">我的订单</span>
					<span @click="mynews()" class="span_1">我的消息</span>
					<span @click="Navigation()" class="span_1">我是商家</span>
					<i>☎️400-800-8820</i>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import VDistpicker from 'v-distpicker'
	export default {
		name: "Header",
		components: {
			VDistpicker
		},
		data() {
			return {
				a:"",
				select: {
					province: '广东省',
					city: '广州市',
					area: '海珠区'
				},
			}
		},
		methods: {
			enter: function() {
				window.location.href = "#/Enter"
			},
			out: function() {
				window.location.href = "#/FirstPage"
			},
			myorder:function(){
				window.location.href='#/myorder'
			},
			mynews:function(){
				window.location.href='#/mynews'
			},
			Navigation:function(){
				window.location.href='#/Navigation'
			},
			 onChangeProvince(a){
	          console.log(a);
	          var province = a.value;	          
	        },
	        onChangeCity(a){
	          console.log(a);
	          var city = a.value;
	        },
	        onChangeArea(a){
	          console.log(a);	
	          var area = a.value;
			},
			//选择地址
			trigger:function(a){
				console.log(a);
				var arr = a.province.value+a.city.value+a.area.value;
				$('.address').html(arr);
			}
		}
	}
	
	
	$(function() {
		$(".address_img").on('click', function() {
			$(".Id").fadeIn();
		});
		$(".Id button").click(function() {
			$(".Id").hide();
		})
	})
</script>
<style scoped>
	.span_1:hover {
		cursor: pointer;
		color: red;
	}
	
	.span1:hover {
		cursor: pointer;
		color: red;
	}
	
	i:hover {
		cursor: pointer;
		color: red;
	}
	
	.top {
		width: 100%;
		background-color: #eeeeee;
	}
	
	.top_1 {
		width: 1280px;
		height: 36px;
		margin: auto;
	}
	
	.top::after {
		content: "";
		display: block;
		clear: both;
	}
	/*头部左边*/
	
	.top-left {
		height: 36px;
		line-height: 36px;
		float: left;
		font-size: 14px;
		color: #6f6f6f;
	}
	
	.top-left .address {
		margin: 0px 5px 0px 7px;
	}
	
	.top-left img {
		width: 9px;
		height: 6px;
		line-height: 6px;
	}
	/*头部JS事件*/
	
	.Id {
		width: 693px;
		height: 345px;
		background: url(../assets/image/777.jpg) no-repeat;
		background-size: 100% 100%;
		position: absolute;
		left: 555px;
		top: 500px;
		padding: 20px;
		display: none;
		z-index: 10000;
		border: 5px solid #e2e2e2;
		z-index: 20000;
	}
	
	.select {
		margin-left: 118px;
	}
	.Id_up {
		margin-top: 55px;
		margin-bottom: 65px;
	}	
	.Id_up span {
		font-size: 17px;
		margin-left: 60px;
		padding-left: 60px;
	}
	
	.Id_up button {
		width: 178px;
		height: 35px;
		background: green;
		border-radius: 5px;
		color: white;
		font-size: 17px;
		font-weight: 200;
		margin-left: 20px;
	}
	/*确认按钮*/
	.ok {
		width: 151px;
		height: 35px;
		background: #F08200;
		color: white;
		border-radius: 5px;
		font-size: 17px;
		margin: 60px auto;
		margin-left: 270px;
	}
	/*头部右边*/
	
	.top-right {
		float: right;
		width: 590px;
		height: 36px;
		line-height: 36px;
		font-size: 14px;
		color: #6f6f6f;
		/*border: 1px solid green;*/
	}
	
	.top-right em {
		font-style: normal;
		color: green;
		font-size: 12px;
		margin-left: 7px;
		margin-right: 13px;
	}
	
	.top-right span {
		/*margin: 0px 13px;*/
	}
	
	.top-right .span1,
	.span2 {
		border-left: 1px solid black;
		border-right: 1px solid black;
		margin: 0px 13px;
		padding-left: 20px;
		padding-right: 20px;
	}
	
	.top-right i {
		font-style: normal;
		font-weight: 900;
		margin-left: 12px;
	}
	
	.span_1 {
		padding-right: 10px;
	}
</style>